<template>
<div>
    <Modal v-model="data.isShow" :mask-closable="false">
        <p slot="header">
            <span>{{data.actionType == 1? '添加' : '修改'}}广告</span>
        </p>

        <div style="margin-top: 10px; padding-right: 20px;">
            <Form ref="form" :model="data.data" :rules="ruleValidate" :label-width="80">
                <FormItem label="广告名称">
                    <Input v-model="data.data.name"></Input>
                </FormItem>
                <!-- <FormItem label="尺寸">
                    <Input v-model="data.data.size"></Input>
          </FormItem>-->
                <FormItem>
                    <Upload ref="upload" multiple action="" :format="['jpg','jpeg','png']" :max-size="2048" :before-upload="handleBeforeUpload" :default-file-list="data.data.pic" :show-upload-list="false" :on-success="handleSuccess" :on-remove="handleRemove" :on-format-error="handleFormatError" :on-exceeded-size="handleMaxSize">
                        <Button icon="ios-cloud-upload-outline">Upload files</Button>
                    </Upload>
                </FormItem>

                <FormItem label="添加日期">
                    <Input v-model="data.data.time"></Input>
                </FormItem>
            </Form>
        </div>
        <div slot="footer">
            <Button type="primary" size="large" :loading="data.isLoading" @on-submit="handleSubmit">确定</Button>
        </div>
    </Modal>
</div>
</template>

<script>
export default {
    props: ["data"],
    data() {
        return {
            ruleValidate: {}
        };
    },
    methods: {
        handleFormatError(file) {
            // 文件格式验证失败钩子
            this.$Notice.warning({
                title: '文件格式不正确',
                desc: 'File format of ' + file.name + ' is incorrect, please select jpg or png.'
            });
        },
        handleSuccess(file) {
            // 上传成功的钩子
        },

        handleRemove(file) {
            //  删除某一个文件时的钩子
        },
        handleMaxSize(file) {
            // 文件超出指定大小限制时的钩子
            this.$Notice.warning({
                title: '超出文件大小限制',
                desc: 'File  ' + file.name + ' is too large, no more than 2M.'
            });
        },
        handleBeforeUpload() {
            // 上传文件个数
            const check = this.data.pic.length < 11;
            if (!check) {
                this.$Notice.warning({
                    title: '最多可以上载10张图片'
                });
            }
            return check;
        }
    },
    handleSubmit() {
        this.$refs["from"].validate(valid => {
            if (valid) {
                this.$emit("on-submit", this.data);
            } else {
                this.$Message.error("清除如必填项");
            }
        });
    }
}
</script>

<style>
</style>
